<%@ page import="framework.common.Common" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta charset="utf-8">
    <title>牛皮</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <!-- 引入框架的js、css等 -->
    <jsp:include page="${request.contextPath}/static/include.jsp" flush="true" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/modal.css?ver=<%=System.currentTimeMillis()%>" /> <%-- 模态框的css --%>

    <script type="text/javascript">
        //一般直接写在一个js文件中
        layui.use([ 'form', 'layer', 'upload'], function() {
            var form = layui.form
                ,$ = layui.jquery
                ,layer = layui.layer
                ,upload = layui.upload;

            verifyExt(form);
            form.on('submit(*)', function(data){ //form校验成功才会执行下面的代码
                //怎么刷新树状table
                ajax("/framework/SysFileModule.do?method=update", serializeObject($("#bofrom")));
                return false; //禁用form表单自带的提交
            });

            _get("/framework/SysWorker.do?method=get&lid=${bo.lid}")
                .then(response => {
                    console.info(response);
                    if(response.code != RESPONSE_SUCCESS){
                        return layer.msg("操作失败",{icon:2});
                    }
                    for(let file of response.data){
                        let imgDiv = $(`
                            <div class="layui-upload-div">
                                <img src="\${file.src}" alt="\${file.name}" class="layui-upload-img" onclick="_previewImage($(this).attr('src'))">
                                <div class="layui-upload-delete" lid=\${file.lid} fileName="\${file.name}">删除</div>
                            <div>
                        `);
                        _deleteFilesWithComfirm(imgDiv);
                        $("#idcardPreview").append(imgDiv);
                    }
                })
                .catch();

            //多图片上传
            var uploadListIns = upload.render({
                elem: '#idcard'
                ,url: '/Upload.do?method=upload&uuid=${uuid}&&sysFileModuleLid=${sysFileModule_idcard}'
                ,accept: 'images'
                ,multiple: true
                ,auto: true
                ,choose: function(obj){
                    let files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        let imgDiv = $(`
                            <div class="layui-upload-div" index=\${index}>
                                <img src="\${result}" alt="\${file.name}" class="layui-upload-img" onclick="_previewImage($(this).attr('src'))">
                                <div class="layui-upload-delete" fileName="\${file.name}">删除</div>
                            <div>
                        `);
                        $("#idcardPreview").append(imgDiv);
                    });
                }
                ,done: function(res, index, upload){
                    if(res.code != RESPONSE_SUCCESS){
                        return layer.msg(res.msg,{icon:2});
                    }
                    let imgDiv = $(`.layui-upload-div[index=\${index}]`);
                    imgDiv.find('img').attr("src", "/" + res.data.url);
                    imgDiv.find('.layui-upload-delete').attr("lid", `\${res.data.lid}`);


                    _deleteFilesWithComfirm(imgDiv); //删除
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
            });


        });


    </script>
</head>

<body class="childBody">
<form id="bofrom" class="layui-form">
    <%-- 主键, uuid --%>
    <input type="hidden" name="lid" value="${bo.lid}">
    <input type="hidden" name="uuid" value="${bo.uuid}">

    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color:red">*</span>职工名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" value="${bo.name}" class="layui-input" lay-verify="required">
        </div>
    </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>多图片上传 + 缩略图即时预览 + 点击预览</legend>
    </fieldset>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="idcard">身份证附件</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="idcardPreview"></div>
        </blockquote>
    </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>多文件上传 + 点击预览</legend>
    </fieldset>
    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="certificate">职称证书</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr><th>文件名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr></thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
    </div>

    <!--隐藏的提交按钮，提供父页面调用  -->
    <div class="layui-form-item" style="display: none;">
        <div class="layui-input-inline">
            <button class="layui-btn form-submit-btn" lay-submit="" lay-filter="*">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
</html>
